<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<div id="app">
			<table border="1px" cellspacing="0px" cellpadding="0px">
				<tr>
					<th>id</th>
					<th>name</th>
					<th>age</th>
					<th>address</th>
				</tr>
				<tr>
					<td v-text="user.id"></td>
					<td v-text="user.name"></td>
					<td v-text="user.age"></td>
					<td v-text="user.address"></td>
				</tr>
			</table>
		</div>
		
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/axios.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			const vue  = new Vue({
				el: "#app",
				data: {
					user: {}
				},
				methods: {
					getUserById: function(){
						/* 
						 axios发送get请求的三种方法：
							方式1：url?id=1
							方式2：url/1
							方式3：url,{params:{id: 1}}
						 */
						axios.get("http://localhost:8081/user/1")
						.then(result => {
							this.user = result.data
						})
						.catch(function(error){
							console.log(error)
						})
					},
					
				},
				mounted() {
					this.getUserById()
				}
			})
		</script>
		
	</body>
</html>
